import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { MessageService } from 'src/app/service/message.service';

@Component({
  selector: 'app-my-sign',
  templateUrl: './my-sign.component.html',
  styleUrls: ['./my-sign.component.scss']
})
export class MySignComponent implements OnInit, OnChanges {

  @Input() nzVisible = false
  @Output() nzVisibleChange = new EventEmitter()
  @Output() onOK = new EventEmitter()
  @Output() onCancel = new EventEmitter()
  constructor(
    private message: MessageService
  ) { }
  ngOnChanges(changes: SimpleChanges): void {
    if(changes && changes['nzVisible'] && changes['nzVisible'].currentValue){
      setTimeout(() => {
        this._drawName()
      }, 0);
    }
  }

  ngOnInit(): void {
    setTimeout(() => {
    }, 0)
  }

  clearName(){
    this.context.clearRect( 0 , 0 , this.canvasWidth, this.canvasHeight );
    this.nameData = null;
    this.isSign = false;
  }
  saveName(){
    if(this.isSign){
      this.nameData = this.canvas.toDataURL();
      this.onOK.emit(this.nameData)
      this.nzVisible = false
      this.nzVisibleChange.emit(this.nzVisible)
    }else{
      this.message.error('请签名');
    }
  }
  nzOnCancel(){
    this.context.clearRect( 0 , 0 , this.canvasWidth, this.canvasHeight );
    this.nameData = null;
    this.isSign = false;

    this.nzVisible = false
    this.nzVisibleChange.emit(this.nzVisible)
  }

  canvasWidth: any;
  canvasHeight: any;
  strokeColor: any;
  isMouseDown: any;
  lastLoc: any;
  lastTimestamp: any;
  lastLineWidth: any;
  canvas: any;
  context: any;
  nameData: any;
  isSign = false;
  _drawName(){
    this.canvasWidth = Math.min( 500 , 800 ); // $(window).width() - 20
    this.canvasHeight = this.canvasWidth;

    this.strokeColor = "black";
    this.isMouseDown = false;
    this.lastLoc = {x:0, y:0};
    this.lastTimestamp = 0;
    this.lastLineWidth = -1;

    this.canvas = document.getElementById("name-canvas");
    this.context = this.canvas.getContext("2d");

    this.canvas.width = this.canvasWidth;
    this.canvas.height = 320;

    let img = new Image();
    img.src = this.nameData;
    img.onload = () => {
      this.context.drawImage(img, 0, 0);
    }
    

    this.canvas.onmousedown = (e: any) => {
      e.preventDefault();
      this.beginStroke( {x: e.clientX , y: e.clientY} );
    };

    this.canvas.onmousemove = (e: any) => {
      e.preventDefault()
      if( this.isMouseDown ){
        this.moveStroke({x: e.clientX , y: e.clientY})
      }
    };

    this.canvas.onmouseup = (e: any) => {
      e.preventDefault()
      this.endStroke()
    };
    this.canvas.onmouseout = (e: any) => {
      e.preventDefault()
      this.endStroke()
    };

  }

  beginStroke(point: any){
    this.isMouseDown = true
    this.lastLoc = this.windowToCanvas(point.x, point.y);
    this.lastTimestamp = new Date().getTime();
  }
  moveStroke(point: any){
    var curLoc = this.windowToCanvas( point.x , point.y );
    var curTimestamp = new Date().getTime();
    // var s = this.calcDistance( curLoc , this.lastLoc )
    // var t = curTimestamp - this.lastTimestamp

    // var lineWidth = this.calcLineWidth( t , s );

    //draw
    this.context.beginPath();
    this.context.moveTo( this.lastLoc.x , this.lastLoc.y );
    this.context.lineTo( curLoc.x , curLoc.y );

    this.context.strokeStyle = this.strokeColor
    this.context.lineWidth = 8
    this.context.lineCap = "round"
    this.context.lineJoin = "round"
    this.context.stroke()

    this.lastLoc = curLoc
    this.lastTimestamp = curTimestamp
    this.lastLineWidth = 8

    this.isSign = true;
  }

  windowToCanvas( x: any , y: any ){
    var bbox = this.canvas.getBoundingClientRect();
    return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)}
  }
  calcDistance( loc1: any , loc2: any ){
    return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) )
  }

  maxLineWidth = 30;
  minLineWidth = 1;
  maxStrokeV = 10;
  minStrokeV = 0.1;
  calcLineWidth( t: any , s: any ){

    var v = s / t;

    var resultLineWidth;
    if( v <= this.minStrokeV )
        resultLineWidth = this.maxLineWidth;
    else if ( v >= this.maxStrokeV )
        resultLineWidth = this.minLineWidth;
    else{
        resultLineWidth = this.maxLineWidth - (v-this.minStrokeV)/(this.maxStrokeV-this.minStrokeV)*(this.maxLineWidth-this.minLineWidth);
    }

    if( this.lastLineWidth == -1 )
        return resultLineWidth;

    return resultLineWidth*1/3 + this.lastLineWidth*2/3;
  }

  endStroke(){
    this.isMouseDown = false
  }

}
